// 实现这个项目的构建任务
const { src, dest, parallel, series, watch } = require("gulp");

// 引入gulp-sass
// const sass = require("gulp-sass");
// // 引入js转换
// const babel = require("gulp-babel");
// // 引入页面编译模块
// const swig = require("gulp-swig");
// // 引入字体图片转换
// const imagemin = require("gulp-imagemin");
// 引入清除插件
const del = require("del");
// 自动载入插件（仅适用于gulp插件）
const loadPlugins = require("gulp-load-plugins");
const plugins = loadPlugins();
// const uglify = require("gulp-uglify");

// 引入热更新
const browserSync = require("browser-sync");
const bs = browserSync.create();

// 清除任务
const clean = () => {
  return del(["dist", "temp"]);
};

// 拷贝public中文件
const extra = () => {
  return src("public/**", { base: "public" }).pipe(dest("dist"));
};

const image = () => {
  return src("src/assets/images/**", { base: "src" })
    .pipe(plugins.imagemin())
    .pipe(dest("dist"));
};

const font = () => {
  return src("src/assets/fonts/**", { base: "src" })
    .pipe(plugins.imagemin())
    .pipe(dest("dist"));
};

const style = () => {
  return src("src/assets/styles/*.scss", { base: "src" })
    .pipe(plugins.sass({ outputStyle: "expanded" }))
    .pipe(dest("temp"))
    .pipe(bs.reload({ stream: true }));
};

const script = () => {
  return src("src/assets/scripts/*.js", { base: "src" })
    .pipe(plugins.babel({ presets: ["@babel/preset-env"] }))
    .pipe(dest("temp"))
    .pipe(bs.reload({ stream: true }));
};

// 定义页面使用的数据
const data = {
  menus: [
    {
      name: "Home",
      icon: "aperture",
      link: "index.html",
    },
    {
      name: "About",
      link: "about.html",
    },
  ],
  pkg: require("./package.json"),
  data: new Date(),
};

const page = () => {
  return src("src/*.html", { base: "src" })
    .pipe(plugins.swig({ data, default: { caches: false } }))
    .pipe(dest("temp"))
    .pipe(bs.reload({ stream: true }));
};

// 热更新任务
const serve = () => {
  // 监视样式、js、页面等文件
  watch("src/assets/styles/*.scss", style);
  watch("src/assets/scripts/*.js", script);
  watch("src/*.html", page);
  // 单独处理图片、字体、publice变化
  watch(
    ["src/assets/images/**", "src/assets/fonts/**", "public/**"],
    bs.reload
  ); // reload 任务函数
  bs.init({
    notify: false, // 关闭页面提示
    port: 2080,
    files: "/dist/**", // 监听路径
    server: {
      baseDir: ["temp", "src", "public"], // 网站访问根目录
      // 将node_modules指定目录，这样请求会自动找到位置
      routes: {
        "/node_modules": "node_modules",
      },
    },
  });
};

// 压缩任务
const useref = () => {
  return src("temp/*.html", { base: "temp" })
    .pipe(plugins.useref({ searchPath: ["temp", "."] }))
    .pipe(plugins.if(/\.js$/, plugins.uglify()))
    .pipe(plugins.if(/\.css$/, plugins.cleanCss()))
    .pipe(
      plugins.if(
        /\.html$/,
        plugins.htmlmin({
          collapseWhitespace: true, // 清除空格字符（包括换行)
          minifyCSS: true, // 压缩htm中内部标签的css
          minifyJS: true, // 压缩htm中内部标签的js
        })
      )
    )
    .pipe(dest("dist"));
};

// 组合任务,并行
const compile = parallel(style, script, page);
// 先清除，再打包
const build = series(
  clean,
  parallel(series(compile, useref), font, image, extra)
);
// 先重新生成dist，再启动服务并监听
const develop = series(compile, serve);
module.exports = {
  compile,
  build,
  develop,
};
